<template>
  <div>
    首页

    <div ref="box" class="box">
      <span>123</span>
      <br>
      <span>1234</span>
      <br>
      <span>1235</span>
      <br>
      <span>1236</span>
      <br>
      <span>1237</span>
    </div>
  </div>
</template>
<script>
export default {
  created() {
    document.addEventListener('click', (e) => {
      console.log(e.target)
      // box的dom   this.$refs.box
      // 点击的dom  e.target
      // includes  contains
      if (this.$refs.box.contains(e.target)) {
        console.log('盒子内')
      } else {
        console.log('盒子外')
      }
    })
  }
}
</script>
<style lang="scss" scoped>
.box {
  width: 300px;
  height: 300px;
  background-color: #f00;
}
</style>
